<template>
  <div class="app-container">
    <el-row :gutter="20" class="row">
      <el-col :span="24" :xs="24">
        <el-card class="box-card-right">
          <template v-slot:header>
            <div class="clearfix">
              <span>
                {{ fileDetail.fileName }} &nbsp;&nbsp;&nbsp;版本号：{{
                  fileObj.version
                }}</span
              >
            </div>
          </template>
          <FileViews :fileObj="fileDetail"></FileViews>
        </el-card>
        <div class="btns">
          <el-button
            v-if="canEdit"
            size="medium"
            link
            type="info"
            @click="editOnline"
            >在线编辑</el-button
          >
          <el-button v-else size="medium" disabled link type="info"
            >在线编辑</el-button
          >
        </div>
      </el-col>
    </el-row>
    <!-- S 编辑弹窗 -->
    <EditDialog
      v-if="editOpen"
      title="文档重传"
      :open="editOpen"
      :fileObj="fileObj"
      :uploadSetting="uploadSetting"
      :fileCate="fileCate"
      @submit="submit"
      @close="editClose"
    ></EditDialog>
    <!-- E 编辑弹窗 -->
  </div>
</template>

<script setup name="uploadFileView">
import { handleTree } from '@/utils/index'
import {
  getCategoryListSelect,
  cancelFile,
  revokeFile,
  collectFile,
  downloadFile,
  getHistory,
  getRecord,
  getTop,
  editFile,
  getFileDetail,
} from '@/api/fileManager'
import { baseData } from '../index.js'
const EditDialog = defineAsyncComponent(() =>
  import('../uploadFile/editDialog.vue')
)

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const { proxy } = getCurrentInstance()
let editOpen = ref(false)
const uploadSetting = reactive(baseData.uploadSetting)
const formList = ref(baseData.formList)
const file = ref({})

// 只有已发布,并且是上传成功的office和txt才能编辑
const canEdit = computed(() => {
  if (JSON.stringify(fileObj.value) === '{}' || !fileObj.value.module) {
    return
  } else {
    return (
      fileObj.value.detail.status === 'PEND_SUBMIT' &&
      fileObj.value.detail.uploadProgress === '1' &&
      (fileObj.value.module === 'ppt' ||
        fileObj.value.module === 'excel' ||
        fileObj.value.module === 'word' ||
        fileObj.value.module === '文本')
    )
  }
})

const fileDetail = ref({})
function _cancelFile() {
  proxy
    .$confirm('是否确认作废本条数据？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      cancelFile([fileDetail.value.id]).then((res) => {
        proxy.$message.success({
          message: res.msg,
          showClose: true,
          duration: 3500,
        })
      })
    })
    .catch(() => {})
}

function editClose() {
  editOpen.value = false
}

// 跳转至文档编辑
function editOnline() {
  const obj = fileDetail.value
  router.push({
    path: '/fileManager/fileview/' + obj.id,
    query: {
      view: 1,
      mode: 'edit',
      active: '/fileManager/upload',
    },
  })
}

const fileCate = ref([])
function _getCategoryListSelect() {
  getCategoryListSelect({
    includeStop: false,
  }).then((res) => {
    const selectData = res.data
    fileCate.value = selectData
    /*  formList.value.forEach((item, index) => {
      if (item.prop === 'fileCategoryId') {
        item.selectData = handleTree(selectData, 'id')
      }
    }) */
  })
}

_getCategoryListSelect()

function submit(data) {
  // 编辑
  editFile(data).then((res) => {
    if (res.code === 200) {
      editOpen.value = false
      _getFileDetail()
    }
  })
}

// 撤回
function _revokeFile() {
  proxy
    .$confirm('是否确认撤回本条数据？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      revokeFile([fileDetail.value.id]).then((res) => {
        proxy.$message.success({
          message: res.msg,
          showClose: true,
          duration: 3500,
        })
      })
    })
    .catch(() => {})
}

// 收藏
function _collectFile() {
  collectFile({
    collectStatus: 1,
    fileId: fileDetail.value.id,
  }).then((res) => {
    proxy.$message.success({
      message: res.msg,
      showClose: true,
      duration: 3500,
    })
  })
}

// 置顶
function _getTop() {
  proxy
    .$confirm('是否确认置顶本条数据？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      getTop(fileDetail.value.id, {
        topType: '1',
      }).then((res) => {
        proxy.$message.success({
          message: res.msg,
          showClose: true,
          duration: 3500,
        })
      })
    })
    .catch(() => {})
}

// 历史版本查询
const historyObj = ref([])
function _getHistory(mainId) {
  getHistory(mainId).then((res) => {
    if (res.code === 200) {
      historyObj.value = res.data
    } else {
      proxy.$message.error(res.msg)
    }
  })
}

// 生命周期查询
const recordObj = ref([])
function _getRecord(mainId) {
  getRecord(mainId).then((res) => {
    if (res.code === 200) {
      recordObj.value = res.data
    } else {
      proxy.$message.error(res.msg)
    }
  })
}

const id = route.query.id || route.params.id
const fileObj = ref({})
function _getFileDetail() {
  getFileDetail(id).then((res) => {
    fileDetail.value = res.data
    fileObj.value = res.data
  })
}
_getFileDetail()
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
  position: relative;
}
.app-container {
  font-size: 14px;
  overflow-x: hidden;
  color: rgb(96, 98, 102);
  .row {
    min-height: calc(100vh - 124px);
  }
  .class {
    margin-top: 5px;
    margin-bottom: 10px;
  }
  .btn {
    display: flex;
    align-items: center;
    span {
      padding-left: 5px;
    }
  }
  .btns {
    position: absolute;
    top: 13px;
    right: 32px;
  }
  .timeline {
    padding-left: 0;
    width: 95%;
  }
  .box-card:not(:first-child) {
    margin-top: 10px;
  }
  .info {
    max-height: 200px;
    overflow-y: auto;
  }
  .box-card-right {
    height: 100%;
  }
}
</style>
